<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./css/index.css">
</head>
<body>
  <div class="courses-wrap">
    <input type="text" placeholder="搜索课程" id="js-search-input">
    <div class="course-tab">
      <ul class="course-tab-list js-course-tab-list clearfix">
        <li class="tab-item">
          <a href="#" class="course-tab-lk current">全部</a>
        </li>
        <li class="tab-item">
          <a href="#" class="course-tab-lk">公益课程</a>
        </li>
        <li class="tab-item">
          <a href="#" class="course-tab-lk">就业班课程</a>
        </li>
      </ul>
    </div>
    
    <div class="course-card-list-wrap">
        <ul class="course-card-list">
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
          <li class="card-item">
            <a href="#">
              <img src="images/356.webp" alt="">
            </a>
            <div class="item-status">
              <span class="item-status-text">随到随学</span>
            </div>
            <h4 class="item-tt">
              <a href="#" class="tt-lk">
                测试测试测试测试测试测试测试测试测试测试测试测
              </a>
            </h4>
            <div class="item-line">
              <span class="item-price free">免费</span>
              <span class="item-info">18课时</span>
            </div>
          </li>
         
          
        </ul>
    </div>

  </div>

  
</body>
<script src="../js/utils.js"></script>
<script src="./js/index.js"></script>
<script>
  var odiv = document.getElementsByTagName('div')[0];
  // Document.prototype.getElementsByClassName = 
  // Element.prototype.getElementsByClassName = 
  // function(className){
  //   var allDoms = this.getElementsByTagName("*"),
  //       allDomsLen = allDoms.length,
  //       allDomsItem,
  //       finalDoms = [];
    
  //   for(var i = 0; i < allDomsLen; i++){
  //     allDomsItem = allDoms[i];
      
  //     allDomsItem.className.indexOf(className) >= 0 ? finalDoms.push(allDomsItem) : "";
      
  //     // var classArr = trimSpace(allDomsItem.className).trim().split(' '),
  //     //     classArrlen = classArr.length,
  //     //     classArrItem;
     
  //     // for(var j = 0; j < classArrlen; j++){
  //     //   classArrItem = classArr[j];
        
  //     //   if(classArrItem === className){
  //     //     finalDoms.push(allDomsItem);
  //     //     break;
  //     //   }
  //     // }
  //   }

  //   // function trimSpace(str){
  //   //   return str.replace(/\s+/g, ' ');
  //   // }

  //   return finalDoms;    
  // }

  var olk = document.getElementsByClassName("course-tab-lk");

  // var obj = {
  //   a: 1,
  //   b: 2,
  //   c: 3,
  // }

  // var obj1 = {
  //   a: 4,
  //   b: 5,
  //   c: 6,
  // }

  // var obj2 = {
  //   ...obj,
  //   ...obj1,
  // }
  

  // var obj = {
  //   a: [1,2,3,4], 
  //   d: [5,6,7,8],
  //   [Symbol.iterator](){
  //     let index = 0,
  //         arr = [...this.a, ...this.d],
  //         len = arr.length;

  //         return {
  //           next(){
  //             if(index < len){
  //               return {
  //                 value: arr[index++],
  //                 done: false
  //               }
  //             }else{
  //               return {
  //                 value: undefined,
  //                 doen: true,
  //               }
  //             }
  //           }
  //         }
  //   }
  // }

  // for(var i of obj){
  //   console.log(i);
  // }

</script>
</html>